<template>
  <div>
    <div class="list">
      <el-card class="box-card1">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
          <el-form-item label="站点名称">
            <el-select v-model="formInline.regionName" clearable>
              <el-option v-for="item in regionNameArry" :key="item.id" :label="item.regionName" :value="item.regionName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="formInline.realName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="gettableData" size="small">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="box-card" style="margin-top:15px">
        <div slot="header" class="clearfix">
          <div style="display: flex;justify-content: space-between;align-items: center;">
            <p>站点人员数量:<span style="color:red;margin:0 5px">{{regionWorkerTotal}}</span> 承保单位总数:<span
                style="color:red;margin:0 5px">{{chargeOrgTotal}}</span>承保电梯总数:<span style="color:red;margin:0 5px">{{chargeEleTotal}}</span></p>
            <el-button size="small" @click="showAddDetail">新增</el-button>
          </div>

        </div>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{
      fontWeight:800}">
          <el-table-column type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column label="姓名" prop="realName">
          </el-table-column>
          <el-table-column prop="regionName" label="站点名称">
          </el-table-column>
          <el-table-column prop="phonenumber" label="联系电话">
          </el-table-column>
          <el-table-column prop="chargeOrgTotal" label="承保单位数">
          </el-table-column>
          <el-table-column prop="chargeEleTotal" label="承保电梯数">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="small" type="danger" @click="getDelete(scope.row.workerId)">解绑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pagination.pageNum"
          :page-size="pagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal">
        </el-pagination>
      </el-card>
    </div>
    <el-dialog title="站点人员添加" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
      <div style="display:flex;justify-content: space-between;">
        <el-card style="width:34%">
          <el-form :model="form" :inline="true" :rules="rules" ref="form">
            <el-form-item label="站点名称" label-width="100px" required prop="regionName">
              <el-select v-model="form.regionName" placeholder="请选择" size='small'>
                <el-option v-for="item in regionNameArry" :key="item.id" :label="item.regionName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card style="width:64%">
          <el-form :model="form" :inline="true">
            <el-form-item label="姓名" label-width="100px">
              <el-input v-model="form.realName" autocomplete="off" size='small'></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getPeoData" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
      <el-card style="margin-top:15px">
        <el-table :data="temData" style="width: 100%" :header-cell-style="{
      fontWeight:800}" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" :selectable="selectable">
          </el-table-column>
          <el-table-column label="姓名" prop="realName">
          </el-table-column>
          <el-table-column prop="regionName" label="所属站点">
          </el-table-column>
          <el-table-column prop="phonenumber" label="联系电话">
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page.sync="pagination1.pageNum"
          :page-size="pagination1.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination1.pageTotal"
          align='right'>
        </el-pagination>
      </el-card>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="onAdd('form')">添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getselectMaintRegionWorker, selectMaintRegionList, getselectMaintRegionWorkerList, getaddMaintRegionWorkers, getdeleteMaintRegionWorker } from '@/api/scheme'
export default {
  components: {

  },
  data () {
    return {
      multipleSelection: [],
      title: '',
      options: [],
      formLabelWidth: '80px',
      form: {},
      dialogVisible: false,
      activeName: 'first',
      pagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      pagination1: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      formInline: {
        user: '',
      },
      chargeEleTotal: '',
      chargeOrgTotal: '',
      regionWorkerTotal: '',
      temData: [],
      list: [],
      tableData: [],
      regionNameArry: [],
      rules: {
        regionName: [
          { required: true, message: '请选择站点名称', trigger: 'change' }
        ]
      },
    }
  },
  mounted () {
    this.gettableData()
    this.getregionNameArry()
  },
  methods: {
    // 删除人员
    getDelete (workerId) {
      this.$confirm('是否确认删除选中的人员?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          workerId: workerId
        }
        getdeleteMaintRegionWorker(params).then(res => {
          if (res.data.code == '200') {
            this.gettableData()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message({
              type: 'warning',
              message: res.data.msg
            })
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    selectable (row, index) {
      if (!row.regionName) {
        return true
      }
    },
    onAdd (form) {
      this.$refs[form].validate((valid) => {
        console.log(this.multipleSelection)
        if (valid) {
          if (this.multipleSelection.length > 0) {
            this.multipleSelection.map((item) => {
              const obj = {}
              obj.regionId = this.form.regionName
              obj.workerId = item.workerId
              this.list.push(obj)
            })
            const query = {
              list: this.list
            }
            getaddMaintRegionWorkers(query).then(res => {
              if (res.data.code == '200') {
                this.gettableData()
                this.handleClose()
              }
            })
          } else {
            this.$message({
              type: 'info',
              message: '请选择人员'
            })
          }

        } else {
          this.$message({
            message: '请选择要绑定的站点',
            type: 'warning'
          })
          return false
        }
      })

    },
    // // 关闭弹框
    handleClose () {
      this.$refs.form.resetFields()
      this.form = {}
      this.list = []
      this.dialogVisible = false
    },
    //获取站点下拉框
    getregionNameArry () {
      const params = {
        pageNum: 1,
        pageSize: 0,
      }
      selectMaintRegionList(params).then(res => {
        if (res.data.code == 200) {
          this.regionNameArry = res.data.data.list
        }
      })
    },
    // 获取表格数据
    gettableData () {
      const query = {
        realName: this.formInline.realName,
        regionName: this.formInline.regionName,
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
      }
      getselectMaintRegionWorker(query).then(res => {
        if (res.data.code == 200) {
          this.chargeEleTotal = res.data.data.chargeEleTotal
          this.chargeOrgTotal = res.data.data.chargeOrgTotal
          this.regionWorkerTotal = res.data.data.regionWorkerTotal
          this.tableData = res.data.data.page.list
          this.pagination.pageTotal = res.data.data.page.total
        }
      })
    },
    // 获取人员弹框数据
    getPeoData () {
      const query = {
        realName: this.form.realName,
        pageNum: this.pagination1.pageNum,
        pageSize: this.pagination1.pageSize,
      }
      getselectMaintRegionWorkerList(query).then(res => {
        if (res.data.code == 200) {
          this.temData = res.data.data.list
          this.pagination1.pageTotal = res.data.data.total
        }
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // onSave () {
    //   this.handleClose()
    // },
    // // 关闭弹框
    // handleClose () {
    //   this.form = {}
    //   this.dialogVisible = false
    // },
    // 展示弹框
    showAddDetail () {
      this.getPeoData()
      this.dialogVisible = true
    },
    handleSizeChange (val) {
      this.pagination.pageNum = 1
      this.pagination.pageSize = val
    },
    handleCurrentChange (val) {
      this.pagination.pageNum = val
    },
    handleSizeChange1 (val) {
      this.pagination1.pageNum = 1
      this.pagination1.pageSize = val
    },
    handleCurrentChange1 (val) {
      this.pagination1.pageNum = val
    },
    onSubmit () {
      console.log('submit!')
    },
  }
}

</script>
<style lang="less" scoped>
::v-deep .el-tabs__nav-wrap {
  padding: 0 20px;
}
.el-card {
  .el-form {
    ::v-deep .el-form-item__label {
      font-weight: 800;
    }
  }
}
.list {
  .clearfix {
    font-weight: bold;
  }

  .el-pagination {
    margin-top: 2vh;
    text-align: right;
  }
}
</style>
